<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @font-face {
            font-family: "阿里妈妈数黑体 Bold";
            font-weight: 700;
            src: url("//at.alicdn.com/wf/webfont/HtCNtiXoTRCH/xYMf8ROxSksC.woff2") format("woff2"),
                url("//at.alicdn.com/wf/webfont/HtCNtiXoTRCH/Yk8dwu3mE9EP.woff") format("woff");
            font-display: swap;
        }

        @font-face {
            font-family: "阿里妈妈灵动体 VF Thin";
            src: url("//at.alicdn.com/wf/webfont/HtCNtiXoTRCH/kACW57uzGXO5.woff2") format("woff2"),
                url("//at.alicdn.com/wf/webfont/HtCNtiXoTRCH/X7ucvCK6rVrT.woff") format("woff");
            font-display: swap;
        }

        @keyframes animate-stripes {
            0% {
                background-position: 0 0;
            }

            100% {
                background-position: 60px 0;
            }
        }

        .progress-bar-container{
            margin-left: 2px;
        }

        .progress-bar {
            background-color: #1a1a1a;
            height: 21.6px;
            /* 36px * 0.6 */
            width: 216px;
            /* 360px * 0.6 */
            border-radius: 2.4px;
            /* 4px * 0.6 */
            box-shadow: 0 0.6px 2.4px #000 inset, 0 0.6px 0 #444;
            position: relative;
            background-size: 14.4px 14.4px;
            /* 24px * 0.6 */
            background-image: linear-gradient(135deg,
                    rgba(255, 255, 255, .15) 25%,
                    transparent 25%,
                    transparent 50%,
                    rgba(255, 255, 255, .15) 50%,
                    rgba(255, 255, 255, .15) 75%,
                    transparent 75%,
                    transparent);
            animation: animate-stripes 0.6s linear infinite;
            margin-left: auto;
            margin-right: auto;
        }

        .progress-bar-inner {
            display: block;
            height: 21.6px;
            /* 36px * 0.6 */
            width: 36%;
            /* 60% * 0.6 */
            background: linear-gradient(90deg, #0f0, #0ff);
            border-radius: 1.8px;
            /* 3px * 0.6 */
            box-shadow: 0 0.6px 0 rgba(255, 255, 255, .5) inset;
            position: absolute;
            top: 0;
            left: 0;
            transition: width 0.5s ease;
            z-index: 2;
        }

        .topcard {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-left: 5px;
        }

        .leftcard {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            width: 57%;
            /* 55% * 0.6 */
            position: relative;
        }

        .rightcard {
            width: 43%;
            /* 45% * 0.6 */
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }

        .text {
            font-size: 15px;
            /* 36px * 0.6 */
            font-family: 阿里妈妈数黑体 Bold;
            position: relative;
        }

        .power {
            font-size: 25px;
            /* 72px * 0.6 */
            margin-top: 0;
            margin-bottom: 0;
            margin-left: 4.8px;
            /* 8px * 0.6 */
            font-family: "阿里妈妈灵动体 VF Thin";
            background-image: linear-gradient(-179deg, #0ba360, #3cba92 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .suncard {
            margin-top:20px;
            margin-left:-7px;
        }

        .camera {
            position: relative;
            margin-left: auto;
            margin-right: auto;
            margin-top: 15px;
            height: 100px;
            width: 220px;
            overflow: hidden;
            border-radius: 10px;
            box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
        }

        .camera::before {
            content: "";
            position: absolute;
            left: -50%;
            top: -50%;
            width: 200%;
            height: 200%;
            border-radius: 10px;
            background-image: linear-gradient(90deg, #d7d2cc, hsl(0, 0%, 36%) 100%);
            background-position: 0 0;
            background-repeat: no-repeat;
            animation: rotate 2s linear infinite;
            z-index: -2;
        }

        .camera::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: calc(100% - 8px);
            height: calc(100% - 8px);
            z-index: -1;
            background: white;
            border-radius: 5px;
        }

        .camera>.content {
            padding: 10px;
        }

        .sunimg {
            height: 94px;
            width: 214px;
            padding: 5px;
            border-radius: 10px;
            margin-left: -2px;
            margin-top: -2px;
        }

        .degctl {
            margin-left: auto;
            margin-right: auto;
            margin-top: 14px;
            height: 80px;
            width: 240px;
            display: flex;
        }

        .degctltxt {
            margin-top: 10%;
            font-size: 15px;
            /* 36px * 0.6 */
            font-family: 阿里妈妈数黑体 Bold;
        }

        .ctlbutton {
            margin-left: 5px;
        }

        .xctlbutton {
            height: 50%;
            display: flex;
        }

        .xctlbutton h1 {
            margin: 0;
            font-size: 22px;
        }

        .yctlbutton {
            height: 50%;
            display: flex;
        }

        .yctlbutton h1 {
            margin: 0;
            font-size: 22px;
        }

        #demo {
            width: 120px;
            /* 修改为120px宽度 */
            height: 100px;
            margin: 100px auto;
            display: flex;
            align-items: center;
            position: relative;
            margin-left: 6px;
            margin-top: -35px;
            /* 用于度数位置调整 */
        }

        #demo .progress2 {
            width: 100%;
            height: 6px;
            border-radius: 3px;
            background: #F1F5FD;
            position: relative;
        }

        #demo .progress2 .progress-bar2 {
            width: 40%;
            /* 初始进度条宽度 */
            height: 100%;
            border-radius: 3px;
            background: #0072FF;
        }

        #demo .progress2 .progress-bar2 .progress-thumb2 {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: #FFFFFF;
            box-shadow: 0 0 15px 5px #0072FF;
            float: right;
            position: relative;
            left: 7px;
            top: -5px;
        }

        .progress-degree2 {
            position: absolute;
            top: -25px;
            font-size: 14px;
            color: #333;
            font-weight: bold;
            left: 50%;
            transform: translateX(-50%);
        }

        #demo1 {
            width: 120px;
            height: 100px;
            margin: 100px auto;
            display: flex;
            align-items: center;
            position: relative;
            margin-top: -35px;
            margin-left: 8px;
        }

        #demo1 .progress3 {
            width: 100%;
            height: 6px;
            border-radius: 3px;
            background: #F1F5FD;
            /* 右侧背景为 #F1F5FD */
            position: relative;
        }

        #demo1 .progress3 .progress-bar3 {
            width: 100%;
            /* 进度条宽度100% */
            height: 100%;
            border-radius: 3px;
            background: #0072FF;
            /* 左侧默认背景为蓝色 */
            position: absolute;
            top: 0;
            left: 0;
        }

        #demo1 .progress3 .progress-bar3 .progress-thumb3 {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: #FFFFFF;
            box-shadow: 0 0 15px 5px #0072FF;
            position: absolute;
            left: 50%;
            /* 初始滑块在50%的位置 */
            top: -5px;
            transform: translateX(-50%);
            /* 让滑块居中 */
        }

        .progress-degree3 {
            position: absolute;
            top: -25px;
            font-size: 14px;
            color: #333;
            font-weight: bold;
            left: 50%;
            transform: translateX(-50%);
        }
    </style>
</head>

<body>
<div class="suncard">
    <div class="topcard">
        <div class="leftcard">
            <h1 class="text">当前太阳能功率:</h1>
        </div>
        <div class="rightcard">
            <h1 class="power" id="power"></h1>
        </div>
    </div>
    <div class="progress-bar-container">
        <div class="progress-bar">
            <span class="progress-bar-inner"></span>
        </div>
    </div>
    <div class="camera">
        <img class="sunimg" src="https://i.natgeofe.com/n/39544777-cf91-4917-a07b-8767701508e2/49219.jpg" alt="">
    </div>
    <div class="degctl">
        <h1 class="degctltxt">调整角度</h1>
        <div class="ctlbutton">
            <div class="xctlbutton">
                <h1>X:</h1>
                <div id="demo">
                    <div class="progress2">
                        <div class="progress-bar2">
                            <div class="progress-thumb2"></div>
                        </div>
                        <div class="progress-degree2">74°</div> <!-- 显示度数 -->
                    </div>
                </div>
            </div>
            <div class="yctlbutton">
                <h1>Y:</h1>
                <div id="demo1">
                    <div class="progress3">
                        <div class="progress-bar3">
                            <div class="progress-thumb3"></div>
                        </div>
                        <div class="progress-degree3">122°</div> <!-- 显示度数 -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
        function getRandomProgress() {
            return Math.random() * (85 - 75) + 75; // Random value between 75% and 85%
        }

        function updatePowerDisplay() {
            const progressBarInner = document.querySelector('.progress-bar-inner');
            const powerDisplay = document.getElementById('power');
            const progressPercentage = parseFloat(progressBarInner.style.width);

            const powerValue = (progressPercentage / 100) * 3;
            powerDisplay.textContent = powerValue.toFixed(2) + "W";
        }

        const progressBarInner = document.querySelector('.progress-bar-inner');

        setInterval(function () {
            const randomWidth = getRandomProgress();
            progressBarInner.style.width = randomWidth + '%';
            updatePowerDisplay();
        }, 1000);
    </script>
<script>
        var slider = {
            use: function (id) {
                var self = this;
                self.slider = document.getElementById(id);
                self.bar = self.slider.querySelector('.progress-bar2');
                self.thumb = self.slider.querySelector('.progress-thumb2');
                self.degreeDisplay = self.slider.querySelector('.progress-degree2'); // 获取度数显示元素
                self.slider.addEventListener('mousedown', function (e) {
                    if (e.button == 0) { // 判断点击左键
                        self.mDown = true;
                        self.beginX = e.offsetX;
                        self.positionX = e.offsetX;
                        self.beginClientX = e.clientX;
                        self.sliderLong = parseInt(self.getStyle(self.slider, 'width'));
                        var per = parseInt(self.positionX / self.sliderLong * 100);
                        self.bar.style.width = per + '%';
                        self.updateDegree(per);
                    }
                });
                document.addEventListener('mousemove', function (e) {
                    if (self.mDown) {
                        var moveX = e.clientX - self.beginClientX;
                        self.positionX = (self.beginX + moveX > self.sliderLong) ? self.sliderLong : (self.beginX + moveX < 0) ? 0 : self.beginX + moveX;
                        var per = parseInt(self.positionX / self.sliderLong * 100);
                        self.bar.style.width = per + '%';
                        self.updateDegree(per);
                    }
                });
                document.addEventListener('mouseup', function (e) {
                    if (e.button == 0) {
                        self.mDown = false;
                    }
                });
            },
            updateDegree: function (percentage) {
                var degree = Math.round(percentage * 1.8); // 最大 180 度
                this.degreeDisplay.textContent = degree + '°'; // 更新度数显示
                var thumbWidth = parseInt(this.getStyle(this.thumb, 'width'));
                this.degreeDisplay.style.left = `calc(${percentage}% - ${thumbWidth / 2}px)`; // 调整度数显示的位置
            },
            getStyle: function (obj, styleName) { // 获取元素样式的方法
                if (obj.currentStyle) {
                    return obj.currentStyle[styleName];
                } else {
                    return getComputedStyle(obj, null)[styleName];
                }
            }
        };
        slider.use('demo');
    </script>
<script>
        var slider1 = {
            use: function (id) {
                var self = this;
                self.slider = document.getElementById(id);
                self.bar = self.slider.querySelector('.progress-bar3');
                self.thumb = self.slider.querySelector('.progress-thumb3');
                self.degreeDisplay = self.slider.querySelector('.progress-degree3'); // 获取度数显示元素

                // 初始化时将滑块置于70%位置
                self.updatePosition(70);
                self.bar.style.width = '70%'; // 初始进度条的蓝色部分占70%

                self.slider.addEventListener('mousedown', function (e) {
                    if (e.button == 0) { // 判断点击左键
                        self.mDown = true;
                        self.beginX = e.offsetX;
                        self.positionX = e.offsetX;
                        self.beginClientX = e.clientX;
                        self.sliderLong = parseInt(self.getStyle(self.slider, 'width'));
                        var per = parseInt(self.positionX / self.sliderLong * 100);
                        self.updatePosition(per); // 更新滑块位置
                        self.bar.style.width = per + '%'; // 更新进度条的宽度
                        self.updateDegree(per);
                    }
                });

                document.addEventListener('mousemove', function (e) {
                    if (self.mDown) {
                        var moveX = e.clientX - self.beginClientX;
                        self.positionX = (self.beginX + moveX > self.sliderLong) ? self.sliderLong : (self.beginX + moveX < 0) ? 0 : self.beginX + moveX;
                        var per = parseInt(self.positionX / self.sliderLong * 100);
                        self.updatePosition(per); // 更新滑块位置
                        self.bar.style.width = per + '%'; // 更新进度条的宽度
                        self.updateDegree(per);
                    }
                });

                document.addEventListener('mouseup', function (e) {
                    if (e.button == 0) {
                        self.mDown = false;
                    }
                });
            },
            updateDegree: function (percentage) {
                var degree = Math.round(percentage * 1.8); // 最大 180 度
                this.degreeDisplay.textContent = degree + '°'; // 更新度数显示
                var thumbWidth = parseInt(this.getStyle(this.thumb, 'width'));
                this.degreeDisplay.style.left = `calc(${percentage}% - ${thumbWidth / 2}px)`; // 调整度数显示的位置
            },
            updatePosition: function (percentage) {
                // 使滑块始终保持在进度条的位置
                var thumbWidth = parseInt(this.getStyle(this.thumb, 'width'));
                var newPosition = percentage * (this.slider.offsetWidth / 100) - thumbWidth / 2;
                this.thumb.style.left = `${newPosition}px`;
            },
            getStyle: function (obj, styleName) { // 获取元素样式的方法
                if (obj.currentStyle) {
                    return obj.currentStyle[styleName];
                } else {
                    return getComputedStyle(obj, null)[styleName];
                }
            }
        };
        slider1.use('demo1');
    </script>
</body>

</html>